<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="1000" height="800"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
     var canvas=document.querySelector("#canvas")
    var ctx=canvas.getContext("2d")
    // ctx.arc(100,100,100,0,Math.PI*2)
    // ctx.fill()
    // location
    function tp(x,y,vx,vy,radius){
      this.x=x
      this.y=y
      this.vx=vx
      this.vy=vy
      this.radius=radius
      this.mask=function(){
            ctx.save();
            ctx.fillStyle="rgba(0,0,0,.1)"
            ctx.fillRect(0,0,canvas.width,canvas.height);
            ctx.restore();
      }
      this.move=function(){
        if(this.x+this.radius>=canvas.width||this.x-this.radius<=0){
          this.vx=-this.vx
        }
        else if(this.y+this.radius>=canvas.height||this.y-this.radius<=0){
          this.vy=-this.vy
        }
        this.x+=this.vx
        this.y+=this.vy
        // this.draw()
      }
      this.draw=function(){
        this.mask();
          ctx.save();
          ctx.fillStyle = 'red';
          ctx.beginPath();
          ctx.arc(this.x,this.y, this.radius, 0, Math.PI*2);
          ctx.fill();
          // console.dir(this.x);
          ctx.restore();
          this.move();
      }
    }
    var ball=new tp(100,100,2,2,30)
        function qou() {
          ball.draw()
          ctx.beginPath()
          ctx.save()
          ctx.fillStyle="rgba(0,0,0,.1)"
          ctx.fillRect(0,0,canvas.width,canvas.height)
          ctx.closePath()
          ctx.restore()
          requestAnimationFrame(qou)
        }
        qou()
  </script>
</body>
</html>